import React, { Component } from 'react'
import PropTypes from 'prop-types'
import css from './suggest.module.scss'
export default class SearchSuggest extends Component {
    static propTypes = {
        list: PropTypes.array,
        onSelect: PropTypes.func
    }

    static defaultProps = {
        list: []
    }

    handleSelect = item => {
        typeof this.props.onSelect === 'function' && this.props.onSelect(item.value)
    }

    render() {
        const { list } = this.props
        return (
            <div className={css["wrap"]}>
                <ul className="list">
                    {
                        list.map(item => {
                            return (
                                <li key={item.key} className="list-item" onClick={() => this.handleSelect(item)}>
                                    <span className="list-cell" dangerouslySetInnerHTML={{__html: item.name }}></span>
                                </li>
                            )
                        })
                    }
                </ul>
            </div>
        )
    }
}
